<template>
    <div>
        <el-container class="content">
            <el-header>
                <div class="header-text">
                    广告管理
                </div>
                <div>
                    <el-link
                        href="http://doc.74cms.com/#/se/content?id=pc%E9%A6%96%E9%A1%B5%E5%B9%BF%E5%91%8A%E4%BD%8D%E5%88%86%E5%B8%83%E5%9B%BE"
                        target="_blank" type="primary" :underline="false">查看广告位图例位置说明</el-link>
                </div>
            </el-header>
            <el-main>
                <div class="main-header">
                    <!-- 头部搜索框 -->
                    <div class="main—left">
                        <!-- 平台搜索 -->
                        <el-select v-model="platform" size="large">
                            <el-option v-for="item in platforms" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                        <!-- 广告位搜索 -->
                        <el-select v-model="space" size="large">
                            <el-option v-for="item in spaces" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                        <!-- 状态 -->
                        <el-select v-model="state" size="large">
                            <el-option v-for="item in states" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                        <!-- 到期时间 -->
                        <el-select v-model="expired" size="large">
                            <el-option v-for="item in expireds" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </div>
                    <!-- 头部输入搜索框 -->
                    <div>
                        <el-input v-model="input3" placeholder="请输入搜索内容" class="input-with-select" size="large">
                            <template #prepend>
                                <el-select v-model="seachID" style="width: 115px" size="large">
                                    <el-option label="标题" :value="0" />
                                    <el-option label="广告ID" :value="1" />
                                </el-select>
                            </template>
                            <template #append>
                                <el-button icon="el-icon-search" />
                            </template>
                        </el-input>
                    </div>
                </div>
                <el-table :data="tableData" style="width: 100%;margin:2% 0;">
                    <el-table-column type="selection" width="55" />
                    <el-table-column prop="date" label="广告标题" width="180" />
                    <el-table-column prop="name" label="所属平台" width="180" />
                    <el-table-column prop="address" label="所属广告位" />
                    <el-table-column prop="address" label="开始时间" />
                    <el-table-column prop="address" label="到期时间" />
                    <el-table-column prop="address" label="排序" />
                    <el-table-column prop="address" label="是否显示" />
                    <el-table-column prop="address" label="操作" />
                </el-table>
                <div class="main-bottom">
                    <div class="main-bottom-left">
                        <el-button type="primary">添加广告</el-button>
                        <el-button type="danger">删除所选</el-button>
                    </div>
                    <div class="main-bottom-right">
                        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                            :page-sizes="[100, 200, 300, 400]" :small="small" :disabled="disabled"
                            :background="background" layout="total, sizes, prev, pager, next, jumper" :total="400"
                            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                    </div>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script setup>
const { reactive, toRefs, ref,getCurrentInstance, onMounted } = require("vue-demi");
const {proxy} = getCurrentInstance()
const currentPage = ref();
const pageSize = ref();
const search = reactive({
    platform: 0,
    space: 0,
    state: 0,
    expired: 0,
    seachID: 0
})
// 获取广告列表
const getadvertisingList = ()=>{
    proxy.$API
}
onMounted(()=>{
    getadvertisingList()
})
const handleSizeChange = () => {

}
const handleCurrentChange = () => {

}
const { platform, space, state, expired, seachID } = toRefs(search);
// 广告播放平台
const platforms = ref([
    { value: 0, label: '不限平台' },
    { value: 1, label: 'APP' },
    { value: 2, label: '触屏端' },
    { value: 3, label: '微信小程序' },
    { value: 4, label: 'pc端' },
])
// 广告位
const spaces = ref([
    { value: 0, label: "不限广告位" }
])
// 状态
const states = ref([
    { value: 0, label: "不限显示状态" },
    { value: 1, label: "显示" },
    { value: 2, label: "隐藏" },
])
// 到期时间
const expireds = ref([
    { value: 0, label: '不限到期时间' },
    { value: 1, label: '已经到期' },
    { value: 2, label: '三天内' },
    { value: 3, label: '一周内' },
])
</script>

<style lang="less" scoped>
.content {
    margin: 10px;

    .header-text {
        font-size: 18px;
    }

    .el-main {
        background-color: #fff;
    }
}



.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .main—left {
        .el-select--large {
            width: 18%;
            margin: 0 12px;
        }
    }
}

.main-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>